{% extends 'base.html' %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/grades.css">
{% endblock %}

{% block content %}
<div class="table-container">
    <h1 class="page-title"><i class="fas fa-school"></i> 班级管理</h1>

    <!-- 统计信息 -->
    <div class="grade-stats">
        <div class="stat-card">
            <div class="stat-number">{{ grades|length }}</div>
            <div class="stat-label">班级总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ grades|length }}</div>
            <div class="stat-label">活跃班级</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ grades|length }}</div>
            <div class="stat-label">管理班级</div>
        </div>
    </div>

    <div class="action-bar">
        <div class="search-box">
            <input type="text" placeholder="🔍 搜索班级名称或描述..." />
        </div>
        <a href="{% url 'grades:grade_create' %}" class="btn-primary">
            <i class="fas fa-plus"></i> 创建新班级
        </a>
    </div>

    <div class="card-grid">
        {% for grade in grades %}
        <div class="data-card grade-card">
            <div class="card-header">
                <div>
                    <h3 class="card-title">{{ grade.name }}</h3>
                    <div class="card-subtitle">📋 班级编号: {{ grade.pk }}</div>
                </div>
            </div>
            <div class="card-content">
                <div class="info-row">
                    <span class="info-label">📝 描述：</span>
                    <span class="info-value">{{ grade.description|default:"暂无描述" }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">📅 创建时间：</span>
                    <span class="info-value">{{ grade.created_at|date:"Y年m月d日 H:i" }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">🔄 更新时间：</span>
                    <span class="info-value">{{ grade.updated_at|date:"Y年m月d日 H:i" }}</span>
                </div>
            </div>
            <div class="card-actions">
                <a href="{% url 'grades:grade_detail' grade.pk %}" class="btn-action btn-view">
                    <i class="fas fa-eye"></i> 查看详情
                </a>
                <a href="{% url 'grades:grade_update' grade.pk %}" class="btn-action btn-edit">
                    <i class="fas fa-edit"></i> 编辑班级
                </a>
                <a href="{% url 'grades:grade_delete' grade.pk %}" class="btn-action btn-delete">
                    <i class="fas fa-trash"></i> 删除班级
                </a>
            </div>
        </div>
        {% empty %}
        <div class="no-data">
            <i class="fas fa-school" style="font-size: 3em; color: #ccc; margin-bottom: 20px;"></i>
            <h3>暂无班级信息</h3>
            <p>点击上方"创建新班级"按钮来创建第一个班级</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}